{% extends "award_base.html" %}
{% load i18n %}
{% block head %}
<title>{% trans "蓝鲸开发框架" %}</title>
{{ block.super }}
{% endblock %}
{% block content %}
<div class="page-content" style="min-width:80%;">
	<ol class="breadcrumb detail-breadcrumb">
		<li class="all pro-all"><span href="#index?catalogue=all&amp;tag=all">系统管理</span></li>
		<li><span href="#index/list?catalogue=导航&amp;tag=all">组织管理</span></li>
	</ol>
	<div class="bk-panel bk-demo">
		<div class="bk-panel-header">
			<div class="bk-panel-action">
				<a href="#mymodal" class="bk-button bk-primary" data-toggle="modal" data-target="#myModal">新增</a>
			</div>
		</div>
		<div class="bk-panel-body p0">
			<table id="organization" class="bk-table table-bordered">
				<thead>
					<tr>
						<th>所属组织</th>
						<th>负责人</th>
						<th>可申报人员</th>
						<th>更新人</th>
						<th>申报时间</th>
						<th>操作</th>
					</tr>
				</thead>
			</table>

			<!-- 模态框( Modal )  -->
			<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
				aria-hidden="true" data-backdrop="static">
				<div class="modal-dialog" style="width: 680px;">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
							<h4 class="modal-title" id="myModalLabel">添加组织信息</h4>
						</div>
						<form id="validate_form">
							<div class="bk-form" style="width:600px;padding: 10px" id="validate_form">
								<input type="hidden" id="org_id" class="bk-form-input">
								<div class="bk-form-item is-required">
									<label class="bk-label" style="width:150px;">所属组织</label>
									<div class="bk-form-content" style="margin-left:150px;">
										<input type="text" id="org_name" class="bk-form-input" name="org_name"
											placeholder="请输入所属组织">
									</div>
								</div>
								<div class="bk-form-item is-required">
									<label class="bk-label" style="width:150px;">负责人员</label>
									<div class="bk-form-content" style="margin-left:150px;">
										<input class="bk-form-input" type="text" id="principal" name="principal"
											data-role="tagsinput" style="display: none;" placeholder="输入负责人员后回车确认">
									</div>
								</div>

								<div class="bk-form-item is-required">
									<label class="bk-label" style="width:150px;">可申报人员</label>
									<div class="bk-form-content" style="margin-left:150px;width: 450px">
										<input class="bk-form-input" type="text" id="apply_person" name="apply_person"
											data-role="tagsinput" style="display: none; width: 450px"
											placeholder="输入可申报人员后回车确认">
									</div>
								</div>
							</div>
						</form>

						<div class="modal-footer">
							<button type="button" class="bk-button bk-default" data-dismiss="modal">关闭</button>
							<button type="submit" id="saveOrg" onclick="saveOrg()"
								class="bk-button bk-primary">提交</button>
						</div>
					</div><!-- /.modal-content -->
				</div><!-- /.modal-dialog -->
			</div>
			{% endblock %}
			{% block extra_block %}
			<script src="https://magicbox.bk.tencent.com/static_api/v3/assets/bootstrap-tagsinput-0.6.1/bootstrap-tagsinput.min.js"></script>
			<script>
				var language = {
					search: "{%trans '搜索:' %}",
					lengthMenu: "{% trans '每页显示 _MENU_ 记录' %}",
					zeroRecords: "{% trans '没找到相应的数据！' %}",
					info: "{% trans '分页 _PAGE_ / _PAGES_ 共 _TOTAL_ 条' %}",
					infoEmpty: "{% trans '暂无数据！' %}",
					infoFiltered: "{% trans '(从 _MAX_ 条数据中搜索)' %}",
					paginate: {
						first: "{% trans '首页' %}",
						last: "{% trans '尾页' %}",
						previous: "{% trans '上一页' %}",
						next: "{% trans '下一页' %}",
					}
				}
				var orgTable = $('#organization').DataTable({
					sProcessing: '<img alt="loadding" src="https://magicbox.bk.tencent.com/static_api/v3/components/loading1/images/loading_2_36x36.gif">', //这里很重要，如果你的加载中是文字，则直接写上文字即可，如果是gif的图片，使用img标签就可以加载
					pagingType: "full_numbers",
					paging: true, //隐藏分页
					ordering: false, //关闭排序
					info: true, //隐藏左下角分页信息
					searching: false, //关闭搜索
					pageLength: 10, //每页显示几条数据
					lengthChange: false, //不允许用户改变表格每页显示的记录数
					language: language, //汉化
					serverSide: true,
					lengthMenu: [5, 10, 25, 50, 75, 100],
					ajax: {
						url: '{{SITE_URL}}get_org_list/',
						method: "get",
						dataType: 'json',
						dataSrc: function(json) {
							json.draw = json.data.info.draw;
							json.recordsTotal = json.data.info.recordsTotal;
							json.recordsFiltered = json.data.info.recordsFiltered;
							json.data = json.data.info.data

							return json.data;
						},
					},
					columnDefs: [{
							targets: 0,
							data: "org_name",
						},
						{
							targets: 1,
							data: "principal",
						},
						{
							targets: 2,
							data: "apply_person",
						},
						{
							targets: 3,
							data: "operator",
						},
						{
							targets: 4,
							data: "create_time",
							className: "text-center",
						},
						{
							targets: 5,
							data: "id",
							render: function(data, type, row, meta) {
								return '<a class="bk-icon-button bk-warning bk-button-mini" type="button" onclick="editOrgForm(' +
									data + ')" title="编辑">\n' +
									'<i class="bk-icon icon-file bk-icon"></i>\n' +
									'<i class="bk-text">编辑</i>\n' +
									'</a>\n' +
									'<a class="bk-icon-button bk-danger bk-button-mini" type="button" onclick="deleteOrgForm(' +
									data + ')" title="关闭">\n' +
									'<i class="bk-icon icon-close bk-icon"></i>\n' +
									'<i class="bk-text">删除</i>\n' +
									'</a>\n';
							}
						},
					]
				});
				setInterval(function() {
					orgTable.ajax.reload(null, false); // user paging is not reset on reload
				}, 30000);
				$('#validate_form').validate({
					ignore: '.ignore',
					errorElement: 'div', //错误信息的容器
					errorClass: 'is-danger',
					errorPlacement: function(error, element) {
						error.addClass('bk-form-tip').insertAfter(element)
					},
					success: function(label) { //验证通过的提示图标
						label.html('<div class="bk-badge bk-success"><i class="bk-icon icon-check-1"></i></div>');
					},
					validClass: "bk-valid",
					//验证规则
					rules: {
						org_name: {
							required: true,
						},
						principal: {
							required: true,
						},
						apply_person: {
							required: true,
						},
					},
					//错误提示信息
					messages: {
						org_name: "<p class='bk-tip-text'>所属组织为必填项！</p>  ",
						principal: "<p class='bk-tip-text'>负责人为必填项！</p>  ",
						apply_person: "<p class='bk-tip-text'>可申报人员为必填项！</p>  ",
					}
				});

				function saveOrg() {
					if ($('#validate_form').valid()) {
						$.ajax({
							url: '{{ SITE_URL }}save_org_info/',
							method: 'post',
							data: {
								'org_name': $("#org_name").val(),
								'principal': $('#principal').val(),
								'apply_person': $('#apply_person').val(),
								'org_id': $('#org_id').val(),
								'csrfmiddlewaretoken': "{{ csrf_token }}"
							},
							success: function(response) {
								if (response['result']) {
									new bkMessage({
										message: response['message'],
										theme: 'success'
									})
									$('#myModal').modal('hide')
									orgTable.ajax.reload(null, false)
								} else {
									// 失败处理
									new bkMessage({
										message: response['message'],
										theme: 'error',
										delay: 3000
									});
									$('#myModal').modal('hide')
									orgTable.ajax.reload(null, false)
								}
							}
						})
					}
				}

				function editOrgForm(id) {
					$.ajax({
						url: '{{ SITE_URL }}get_org_info/' + id,
						method: 'get',
						success: function(response) {
							if (response['result']) {
								$("#myModalLabel").text("修改组织信息");
								$('#myModal').modal('show');
								$("#org_name").val(response.data.info.data.org_name);
								$('#principal').val(response.data.info.data.principal);
								$('#apply_person').val(response.data.info.data.apply_person);
								$('#org_id').val(response.data.info.data.id);
								$('#principal').tagsinput('add', response.data.info.data.principal);
								$('#apply_person').tagsinput('add', response.data.info.data.apply_person);
							} else {
								// 失败处理
								new bkMessage({
									message: response['message'],
									theme: 'error',
									delay: 3000
								});
							}
						}
					})
				}

				$('#myModal').on('hide.bs.modal', function() {
					document.getElementById("validate_form").reset();
					$("#validate_form").validate().resetForm();
					$('#principal').tagsinput('removeAll');
					$('#apply_person').tagsinput('removeAll');
					$('#org_id').val("");
				});

				function deleteOrgForm(id) {
					var dialog = new bkDialog({
						type: 'dialog',
						title: '删除',
						content: '确认删除该条数据？',
						confirmFn: function() {
							$.ajax({
								url: '{{ SITE_URL }}delete_org_info/' + id,
								method: 'get',
								success: function(response) {
									if (response['result']) {
										new bkMessage({
											message: response['message'],
											theme: 'success'
										})
										orgTable.ajax.reload(null, false)
									} else {
										// 失败处理
										new bkMessage({
											message: response['message'],
											theme: 'error',
											delay: 3000
										});
									}
								}
							})
						}
					});
					dialog.show();
				}
			</script>
			{% endblock %}
